<!--复选框-->
<template>
  <div class="example">
    <div class="example-left">
      <zz-date @change=handleChange type="year" :showInput = false :showWeek="showWeek"></zz-date>
      <zz-date @change=handleChange type="day" inputClass="projectDate" :clearPosition="{top: 2, right: 0}"></zz-date>
    </div>
    <div class="example-right tableClass">
      <table cellspacing="0">
        <tr>
          <th>1) 调用文件组件</th>
        </tr>
        <tr>
          <td><pre>{{explameCall}}</pre></td>
        </tr>
        <tr>
          <th>2) 写入到methods方法</th>
        </tr>
        <tr>
          <td><pre>{{explameMethods}}</pre></td>
        </tr>
        <tr>
          <th>2) 显示的时间</th>
        </tr>
        <tr>
          <td><pre>{{date}}</pre></td>
        </tr>
        <tr>
          <th><button class="button-block" @click="showWeek++">点我</button></th>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>

  export default {
    name: '',
    data () {
      return {
        date: '',
        checkEd: true,
        showWeek: 0,
        limit: [],
        explameCall: `<zz-date
    :disabled="false"  是否必填 默认关闭
    :disabledTip= "提示语" 默认“请选择时间”
    inputClass="date-input" 自定义样式
    :hideConfirm="true" 是否显示确定按钮
    :showThisYear="false" 是否显示全年按钮
    :type="min" 显示格式 默认精确到分钟 'min' 'hour' 'day' 'year'
    :resetPlace=0 重置时间
    :limit=[{
      type: 'fromto',
      from: '2018-08-25',
      to: this.$moment().format('YYYY-MM-DD')
    }]
    @change=handleChange
    ></zz-date>`,
        explameMethods:
  `changeDate (date) {
    this.date = date
    console.log(this.date)
  }`
      }
    },
    created () {
      this.limit = [{
        type: 'fromto',
        from: '2018-08-25',
        to: this.$moment().format('YYYY-MM-DD')
      }]
    },
    methods: {
      handleChange (state) {
        this.date = state
      }
    }
  }
</script>
<style lang="scss">
  .example{
    padding: 20px;
    .example-left{
      float: left;
    }
    .example-right{
      float: right;
      width: 78%;
    }
    .projectDate {
      border: none;
      width: 80px;
    }
  }
</style>
